<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .wrap{
            width:200px;
            height:100px;
            background: #eee;
            position: absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <!-- <div class="wrap">
        <h1>标题</h1>
        <div class="btns">
            <button>取消</button>
            <button>取消</button>
        </div>
    </div> -->
    <script>
        class Dialog{
            constructor(options){
                this.options = options;
                this.init();
            }

            init(){
                this.createElement();
                this.addEvent();
            }

            addEvent(){
                let btns = [...document.querySelectorAll('button')];
                btns.forEach((item,index) => {
                    // cb0 cb1
                    item.addEventListener('click',this.options[`cb${index}`].bind(this))
                })
            }

            createElement(){
                this.parentNode = document.createElement('div');

                this.parentNode.classList.add('wrap');

                let {title,btns} = this.options;

                this.parentNode.innerHTML = `
                    <h1>${title}</h1>
                    <div class="btns">
                        ${btns.map(item => `<button>${item}</button>`).join('')}
                    </div>
                `;

                document.body.appendChild(this.parentNode);
            }

        }  

        class DragDialog extends Dialog{
            constructor(params){
                super(params);

                this.drag();
            }

            drag(){
                this.parentNode.onmousedown = (e) => {
                    let {x,y} = {x:e.clientX - this.parentNode.offsetLeft,y:e.clientY - this.parentNode.offsetTop};
                    document.onmousemove = (e) => {
                        let {left,top} = {left:e.pageX-x,top:e.pageY-y};
                        this.parentNode.style.left = `${left}px`;

                        this.parentNode.style.top = `${top}px`;
                    }    
                }

                this.parentNode.onmouseup = () => {
                    document.onmousemove = null;
                }
            }

        }


        
        new DragDialog({
            title:'标题DragDialog',
            btns:['取消','确定'],
            cb0(){
                // console.log(this)
                document.body.removeChild(this.parentNode);
            },
            cb1(){
                console.log("确定")
            }
        })
    </script>   
</body>
</html>